<template>
  <view class="container">
    <custom-nav title="消息"></custom-nav>
    <view class="content">
      <scroll-view
        style="height: 100%"
        :scroll-y="true"
        :refresher-enabled="true"
        :refresher-isRefresh="isRefresh"
        refresher-background="transparent"
        :refresher-threshold="100"
        :scroll-with-animation="true"
        @refresherrefresh="onRefresh"
        @refresherrestore="onRestore"
        @scrolltolower="onLower"
        @scroll="onScroll"
        :refresher-triggered="isRefresh"
      >
        <!-- 列表卡片 -->
        <list-card :msgCount="msgCount"></list-card>
        <!-- 消息卡片 -->
        <view class="msg-content">
          <template v-if="myInfo.appLogin && myInfo.phone">
            <template v-if="msgList.length">
              <view
                class="msg-border"
                v-for="(item, index) in msgList"
                :key="index"
              >
                <msg-card :item="item"></msg-card>
              </view>
            </template>
            <custom-empty v-else></custom-empty>
          </template>

          <tips-card v-else></tips-card>
        </view>
      </scroll-view>
    </view>

    <template v-if="myInfo.appLogin && myInfo.phone">
      <!-- 底部提示 -->
      <view :style="isHideStyle" v-if="!gzhStatus">
        <bottom-card></bottom-card>
      </view>

      <!-- 客服悬浮 -->
      <custom-serve></custom-serve>
    </template>
  </view>
</template>

<script setup>
import TipsCard from "@/components/common/tips-card";
import ListCard from "./components/list-card.vue";
import MsgCard from "./components/msg-card.vue";
import BottomCard from "./components/bottom-card.vue";

// 引入api
import { fetchMessageList } from "@/api/message";
import { getItem, setItem } from "@/utils/storage";

import useStore from "@/store";
const { app, common } = useStore();

// data
const myInfo = ref({});
const isRefresh = ref(false);
const isInitIng = ref(false);
const isUserPhone = ref("");
const loadStatus = ref("");
const msgCount = ref({});
const msgList = ref([]);
const timer = ref(null);
const filterQuery = reactive({
  page: 1,
  limit: 5,
});
const isHideStyle = reactive({
  position: "fixed",
  left: 0,
  bottom: 0,
  width: "100%",
  height: "180rpx",
  transition: "1s",
  overflow: "hidden",
});
// 公众号关注状态  -  先隐藏引导关注公众号逻辑，待后续更新
// const gzhStatus = computed(() => app.gzhStatus);
const gzhStatus = computed(() => true);

// 监听滚动事件
const onScroll = (e) => {
  const top = e.detail.scrollTop;
  if (top >= 20) {
    isHideStyle.height = "0rpx";
  } else {
    isHideStyle.height = "180rpx";
  }
};
const onRestore = () => {
  uni.showToast({
    title: "刷新成功~",
    icon: "none",
  });
};
const onRefresh = () => {
  isHideStyle.height = "180rpx";
  filterQuery.page = 1;
  isRefresh.value = true;
  getList(true);
};

const onLower = () => {
  if (!isUserPhone.value) return;
  if (isInitIng.value) return;

  loadStatus.value = "loading";
  ++filterQuery.page;

  getList(false);
};

// 获取列表
const getList = async (refresh = true) => {
  try {
    const { data } = await fetchMessageList(filterQuery);
    const { count, list } = data;
    isRefresh.value = false;

    const nList = list.filter((v) => {
      if (v.user && v.user.id) {
        if (v.user_id && v.s_user_id) {
          if (v.user_id != v.s_user_id) {
            return v;
          }
        }
      }
    });
    msgList.value = refresh ? nList : msgList.value.concat(nList);
    if (!nList?.length) {
      loadStatus.value = "nomore";
    }
  } catch (error) {
    isRefresh.value = false;
  }
};

const getNotice = async () => {
  if (!gzhStatus.value) {
    const n = getItem("initNoticeStatus");
    if (n) {
      timer.value = setTimeout(() => {
        const len = getCurrentPages().length;
        const path = getCurrentPages()[len - 1].route;
        const fPage = path == "pages/message/index";
        if (fPage) {
          common.updatePopupOpen(true, "notice");
          setItem("initNoticeStatus", false);
        } else {
          clearTimeout(timer.value);
        }
      }, 100);
    }
  }

  if (gzhStatus.value) {
    clearTimeout(timer.value);
  }
};

// 获取个人信息
const getInfo = () => {
  app
    .getUserInfo()
    .then((res) => {
      myInfo.value = res;
      const { appLogin, phone, count } = res;
      if (!appLogin) return;
      if (!phone) return;

      msgCount.value = count;
      filterQuery.page = 1;
      getList();
      getNotice();
    })
    .catch((err) => {
      myInfo.value = {};
    });
};

onShow(() => {
  getInfo();
});
</script>

<style lang="scss" scoped>
.msg-content {
  background: #fff;
  margin: 20rpx 0;
  padding: 10rpx 30rpx 20rpx;
  .msg-border {
    border-bottom: 1px solid #eee;
    &:last-child {
      border: none;
    }
  }
}
</style>
